<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-2.0.3.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#nav li').click(function(){
				$(this).addClass('active').siblings().removeClass('active');
				$('#nav').find('.js').css('color','red').end().css('color','pink')
				// $('li').css({"font-size":"30px","color":"yellow"})
			})
		})
	</script>
	<style type="text/css">
		.active{
			background-color: blue;
		}
		div{
			width: 100px;
			height: 100px;
			border: 1px solid black;
		}
	</style>
	
</head>
<body>
<script>
	$(function(){
			$('button').click(function(){
		$('div').each(function(shunxu,num){
			$(num).css("backgroundColor","yellow");
			if($(this).is("#stop")){
				$("span").html("Stopped at div shunxu #" + shunxu);
				console.log($('div').size())
				return false;
			}
		})
	})
	})

	</script>	
<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>

<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>

<div></div>
<div></div>
</body>
</html>